<!--
 * @Descripttion: 
 * @version: 0.0.1
 * @Author: zhu_liangyu
 * @Date: 2020-10-30 10:08:43
 * @LastEditors: zhu_liangyu
 * @LastEditTime: 2020-11-10 08:51:36
-->
<template>
  <a-card
    style="width: 100%"
    :loading="loading"
    :bordered="cardBordered"
    :tab-list="tabState.tabList"
    :active-tab-key="currentTabKey"
    @tabChange="(key) => onTabChange(key, 'noTitleKey')"
  >
    <div v-if="currentTabKey === 'sales'">
      <a-row :gutter="16">
        <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="17">
          <div class="wish-dashboard-analysis-tableCard-columnChart">
            <h4 class="wish-dashboard-analysis-tableCard-columnChart-title">
              {{ t('dashboard.analysis.salesTrend') }}
            </h4>
            <ColumnChart v-bind="chartConfig"></ColumnChart>
          </div>
        </a-col>
        <a-divider type="vertical" style="height: auto" />
        <a-col :xs="24" :sm="24" :md="12" :lg="11" :xl="6">
          <div class="wish-dashboard-analysis-tableCard-ranking">
            <h4 class="wish-dashboard-analysis-tableCard-ranking-title">
              {{ t('dashboard.analysis.salesRanking') }}
            </h4>
            <ul class="wish-dashboard-analysis-tableCard-ranking-list">
              <li v-for="(item, index) in tabState.rankingList" :key="index">
                <span
                  :class="[
                    item.active ? 'rankingItemNumber-active' : '',
                    'wish-dashboard-analysis-tableCard-rankingItemNumber',
                  ]"
                >
                  {{ item.no }}
                </span>
                <span class="wish-dashboard-analysis-tableCard-rankingItemTitle">
                  {{ item.title }}
                </span>
                <span>{{ item.value }}</span>
              </li>
            </ul>
          </div>
        </a-col>
      </a-row>
    </div>
    <div v-else-if="currentTabKey === 'visits'">
      <a-row :gutter="16">
        <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="17">
          <div class="wish-dashboard-analysis-tableCard-columnChart">
            <h4 class="wish-dashboard-analysis-tableCard-columnChart-title">
              {{ t('dashboard.analysis.trafficTrend') }}
            </h4>
            <ColumnChart v-bind="chartConfig"></ColumnChart>
          </div>
        </a-col>
        <a-divider type="vertical" style="height: auto" />
        <a-col :xs="24" :sm="24" :md="12" :lg="11" :xl="6">
          <div class="wish-dashboard-analysis-tableCard-ranking">
            <h4 class="wish-dashboard-analysis-tableCard-ranking-title">
              {{ t('dashboard.analysis.trafficRanking') }}
            </h4>
            <ul class="wish-dashboard-analysis-tableCard-ranking-list">
              <li v-for="(item, index) in tabState.rankingList" :key="index">
                <span
                  :class="[
                    item.active ? 'rankingItemNumber-active' : '',
                    'wish-dashboard-analysis-tableCard-rankingItemNumber',
                  ]"
                >
                  {{ item.no }}
                </span>
                <span class="wish-dashboard-analysis-tableCard-rankingItemTitle">
                  {{ item.title }}
                </span>
                <span>{{ item.value }}</span>
              </li>
            </ul>
          </div>
        </a-col>
      </a-row>
    </div>
    <template #tabBarExtraContent>
      <div class="wish-dashboard-analysis-tableCard-salesExtra">
        <span
          v-for="(item, index) in tabState.dateTypeList"
          :key="index"
          :class="{ 'salesExtra-currentDate': currentDateType == item.value }"
          @click="onDateTypeChange(item)"
        >
          {{ item.label }}
        </span>
      </div>
      <a-range-picker
        style="width: 240px"
        :valueFormat="format"
        :format="format"
        v-model:value="currentDate"
        @change="onDateChange"
      />
    </template>
  </a-card>
</template>

<script lang="ts">
import { reactive, ref, inject, onMounted } from 'vue'
import moment from 'moment'
import { ColumnChart } from '@opd/g2plot-vue'
import { useI18n } from 'vue-i18n'

export default {
  name: 'AnalysisTabCard',
  components: {
    ColumnChart,
  },
  setup() {
    const { t, d } = useI18n()
    const loading = ref(true)
    const format = ref('YYYY-MM-DD')
    const cardBordered = inject('cardBordered')
    const currentTabKey = ref('sales')
    const currentDate = ref(null)
    const currentDateType = ref(null)

    /**
     * 创建数据
     */
    const createData = () => {
      const data = []
      for (let i = 0; i < 12; i++) {
        let addDate = moment(new Date('2020-01-01')).add(i, 'month').format('YYYY-MM-DD')
        data.push({
          month: d(addDate, 'month'),
          value: 2000 - parseInt(String(Math.random() * 1000)),
        })
      }
      return data
    }

    const createRankingList = () => {
      const rankingList = []
      let number = 3000
      for (let i = 1; i < 8; i++) {
        let active = i <= 3 ? true : false
        rankingList.push({
          no: i,
          title: t('dashboard.analysis.shopAddress', { no: i }),
          value: (number -= 250),
          active,
        })
      }
      return rankingList
    }

    /**
     * 创建日期类型数组对象
     */
    const createDateTypeList = () => {
      const today = moment()
      //今日
      const format = 'YYYY-MM-DD'

      //本周
      const week = moment().week(today.week())

      //本月
      const month = moment().month(today.month())

      //本年
      const year = moment().year(today.year())

      const dateTypeList = []
      dateTypeList.push({
        label: t('common.days.today'),
        value: 'today',
        dateArr: [today.format(format), today.format(format)],
      })
      dateTypeList.push({
        label: t('common.days.thisWeek'),
        value: 'thisweek',
        dateArr: [week.startOf('week').format(format), week.endOf('week').format(format)],
      })
      dateTypeList.push({
        label: t('common.days.thisMonth'),
        value: 'thismonth',
        dateArr: [month.startOf('month').format(format), month.endOf('month').format(format)],
      })
      dateTypeList.push({
        label: t('common.days.thisYear'),
        value: 'thisyear',
        dateArr: [year.startOf('year').format(format), year.endOf('year').format(format)],
      })
      return dateTypeList
    }

    const tabState = reactive({
      //标签页数组
      tabList: [
        { key: 'sales', tab: t('dashboard.analysis.salesVolume') },
        { key: 'visits', tab: t('dashboard.analysis.visits') },
      ],
      rankingList: createRankingList(), //排名数组
      dateTypeList: createDateTypeList(), ////日期类型数组
    })

    const chartConfig = {
      data: createData(),
      height: 254,
      color: '#1890ff',
      xField: 'month',
      yField: 'value',
      columnWidthRatio: 0.5,
      meta: {
        month: {
          alias: '月份',
        },
        value: {
          alias: '销售额',
        },
      },
      yAxis: {
        grid: {
          line: {
            style: {
              lineDash: [2, 5],
            },
          },
        },
      },
    }

    const onTabChange = (key: string) => {
      currentTabKey.value = key
    }

    //手动修改日期的同时手动判断是否需要选中对应的日期类型
    const onDateChange = () => {
      currentDateType.value = null
      for (let i in tabState.dateTypeList) {
        if (
          currentDate.value[0] == tabState.dateTypeList[i].dateArr[0] &&
          currentDate.value[1] == tabState.dateTypeList[i].dateArr[1]
        ) {
          currentDateType.value = tabState.dateTypeList[i].value
          break
        }
      }
    }

    //选择日期类型的同时修改当前日期为对应的值
    const onDateTypeChange = (item: any) => {
      currentDateType.value = item.value
      currentDate.value = item.dateArr
    }
    onMounted(() => {
      setTimeout(() => (loading.value = false), 1000)
      onDateTypeChange(tabState.dateTypeList[0])
    })
    return {
      t,
      loading, //表格loadding
      format, //日期格式化
      cardBordered, //表格是否有边框
      currentTabKey, //当前标签页key
      tabState,
      currentDate, //当前日期
      currentDateType, //当前日期类型
      onTabChange, //标签页变化事件
      onDateChange, //日期选择变化事件
      onDateTypeChange, //日期类型变化事件
      chartConfig, //图标数据
    }
  },
}
</script>

<style lang="less" scoped>
::v-deep(.ant-tabs-nav-scroll) {
  float: left;
}

::v-deep(.ant-tabs .ant-tabs-large-bar .ant-tabs-tab) {
  padding: 16px 0px;
}

.wish-dashboard-analysis-tableCard-salesExtra {
  display: inline-block;
  margin-right: 24px;

  span {
    margin-left: 24px;
    color: rgba(0, 0, 0, 0.85);
    cursor: pointer;
  }
}

.salesExtra-currentDate {
  color: #1890ff !important;
}

.wish-dashboard-analysis-tableCard-columnChart,
.wish-dashboard-analysis-tableCard-ranking {
  height: 295px;
}
// .wish-dashboard-analysis-tableCard-ranking {
//   padding-left: 48px;
// }

.wish-dashboard-analysis-tableCard-columnChart-title,
.wish-dashboard-analysis-tableCard-ranking-title {
  margin-bottom: 24px;
}
.wish-dashboard-analysis-tableCard-ranking-list {
  margin: 25px 0 0;
  padding: 0;
  list-style: none;
}

.wish-dashboard-analysis-tableCard-rankingItemNumber {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-top: 1.5px;
  margin-right: 16px;
  font-weight: 600;
  font-size: 12px;
  line-height: 20px;
  text-align: center;
  background-color: #fafafa;
  border-radius: 20px;
}
.rankingItemNumber-active {
  color: #fff !important;
  background-color: #314659;
}

.wish-dashboard-analysis-tableCard-ranking-list li {
  display: flex;
  align-items: center;
  margin-top: 16px;
  zoom: 1;
  span {
    color: rgba(0, 0, 0, 0.85);
    font-size: 14px;
    line-height: 22px;
  }
}

.wish-dashboard-analysis-tableCard-rankingItemTitle {
  flex: 1 1;
  margin-right: 8px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
